<template>
	<view class="eatView">
		<view class="back">
			<goBack :title="'图片详情'" :ShareState="ShareState"></goBack>
		</view>

		<template v-if="isShow == false">
			<view class="box">
				<view class="box_header">
					<view class="box_img">
						<image src="../../static/ic_analyse_default.png" />
					</view>
					<view class="box_name">
						<text>{{ imgDetail.user_name }}</text>
						<text>{{ userDate }}</text>
					</view>
				</view>

				<view class="box_section">
					<image   mode="widthFix" :src="imgDetail.image_url" />
				</view>

				<view class="box_content" v-if="imgDetail.description">
					<text>{{ imgDetail.description }}</text>
				</view>
			</view>
		</template>

			<u-loading-page :loading="isShow" loading-text="loading..."></u-loading-page>
		

		<view class="box_agree" @click="toAgree" v-if="isShow == false">
			<image v-if="isAgree == false" src="../../static/ic_photo_agree.png" />
			<image v-else src="../../static/ic_photo_agree_selected.png" />
			<text :class="isAgree ? 'active' : ''">{{ like_ct }}</text>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				isAgree: false,
				imgDetail: {},
				ShareState:true
			};
		},
		methods: {
			toAgree: function() {
				this.isAgree = !this.isAgree;
				if (this.isAgree) {
					uni.showToast({
						title: '点赞成功',
						icon: 'none'
					})

				} else {
					uni.showToast({
						title: '点赞取消',
						icon: 'none'
					})
				}
			},
		},
		computed: {
			like_ct: function() {
				return this.imgDetail.like_ct;
			},
			userDate: function() {
				let date1 = new Date(this.imgDetail.post_date);
				let date2 = new Date();

				let year1 = date1.getFullYear();
				let year2 = date2.getFullYear();
				let date = `${year2 - year1}年前`;
				return date;
			},
		},
		onLoad(options) {
			let id = options.id;
			this.isShow = true;
			uni.request({
				url: `https://api.kele8.cn/agent/http://food.boohee.com/fb/v1/food_cards/${id}`,
				success: (res) => {
					this.imgDetail = res.data;
					this.isShow = false;
				}
			})

		}
	}
</script>

<style lang="scss" scoped>
.eatView {
    padding-bottom: 50px;
	.back{
		position: sticky;
		left: 0;
		top: 0;
		z-index: 3;
	}
  .box {
    .box_header {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 10px 15px;
      background: white;
      text-align: left;
      .box_img {
        image {
          width: 40px;
          height: 40px;
          border-radius: 50px;
        }
      }
      .box_name {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        text {
          &:nth-of-type(1) {
            font-size: 15px;
            font-weight: bold;
          }
          &:nth-of-type(2) {
            font-size: 13px;
            color: #999999;
          }
        }
      }
    }

    .box_content {
      text-align: left;
      background: white;
      padding: 10px;
      font-size: 14px;
    }
  }
  .box_agree {
    position: fixed;
    left: 0;
    width: 100%;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    background: white;
    border-top: 1px solid #ededed;
    image {
      width: 30px;
      height: 30px;
    }
    text {
      font-size: 14px;
      color: #999999;
    }
    .active {
      color: #ff7d81;
    }
  }
 
}
</style>
